<template>
    <div class="commodityprice-box">
        <el-dialog
            :title="
                datatype == 1
                    ? is_dom == 1
                        ? '产品价格'
                        : '产品成本'
                    : is_dom == 1
                    ? '服务价格'
                    : '服务成本'
            "
            :visible.sync="is_dialog"
            width="400px"
            top="11vh"
        >
            <div class="dialog-box">
                <div class="quotation-method" v-if="datatype == 1">
                    <div class="method-title">
                        <span>{{
                            is_dom == 1 ? "报价方式:" : "计算方式:"
                        }}</span>
                    </div>
                    <div class="method-select">
                        <el-select
                            v-model="priceType"
                            popper-class="method-box"
                            class="w-select"
                            @change="
                                setConfigureSwitch(
                                    is_dom == 1
                                        ? 'price_quote_type'
                                        : 'cost_quote_type',
                                    $event
                                )
                            "
                        >
                            <el-option
                                v-for="item in cities"
                                :key="item.fields_value"
                                :label="item.label"
                                :value="item.fields_value"
                            >
                                <div class="option-title">{{ item.label }}</div>
                                <div class="option-doc">{{ item.doc }}</div>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="productlabel-scribe">
                    <div class="scribe-left">
                        <div class="title" :class="is_dom == 1 ? '' : 'cost'">
                            <span>{{ is_dom == 1 ? "划线价" : "成本" }}</span>
                        </div>
                        <div
                            class="explain"
                            v-if="is_dom == 1 && datatype == 1"
                        >
                            <span>开启划线价，如</span>
                            <span class="scribe">￥168.00</span>
                        </div>
                        <div
                            class="explain"
                            v-if="is_dom == 1 && datatype == 2"
                        >
                            <span>不可修改</span>
                        </div>
                        <div class="explain" v-if="is_dom == 2">
                            <span>关闭后不使用成本</span>
                        </div>
                    </div>
                    <div class="scribe-right">
                        <el-switch
                            v-model="is_switch"
                            active-color="#3388ff"
                            inactive-color="#dcdfe6"
                            active-value="1"
                            inactive-value="2"
                            @change="
                                setConfigureSwitch(
                                    is_dom == 1 ? 'pricec' : 'cost',
                                    $event
                                )
                            "
                        >
                        </el-switch>
                    </div>
                </div>

                <div
                    class="list-box comm-list"
                    v-if="(datatype == 1 && is_dom == 1) || datatype == 2"
                >
                    <div
                        class="list-row"
                        v-for="item in list_data"
                        :key="item.id"
                        @click="setStateFun(item, list_data)"
                    >
                        <div class="list-left">
                            <span class="title">{{ item.title }}</span>
                        </div>
                        <div class="list-right">
                            <span class="default-price" v-show="item.isod == 1">
                                <i class="el-icon-check"></i
                                >{{
                                    is_dom == 1 ? "默认开单价格" : "默认成本"
                                }}</span
                            >
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                @click.stop="eidtpriceTitle(item, list_data)"
                            ></el-button>
                            <span @click.stop="setmaom">
                                <el-switch
                                    v-model="item.status"
                                    active-color="#3388ff"
                                    inactive-color="#dcdfe6"
                                    active-value="1"
                                    inactive-value="2"
                                    @change="
                                        setModifychildprice(item, list_data)
                                    "
                                >
                                </el-switch>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

export default {
    name: "company",
    props: ["datatype"],
    data() {
        return {
            is_dialog: false,
            priceType: "0",
            is_switch: "2",
            cities: [],
            list_data: [],
            is_dom: "",
            saveUrl: "",
            lsUrl: "",
        };
    },
    created() {},
    methods: {
        initData(item) {
            this.is_dom = item;
            if (item == 1) {
                this.cities = [
                    {
                        fields_value: "0",
                        label: "无关联报价",
                        doc: "适用单一规格或单位的产品",
                    },
                    {
                        fields_value: "2",
                        label: "按规格报价",
                        doc: "适用按规格销售的产品,选择后按规格输入价格",
                    },
                    {
                        fields_value: "1",
                        label: "按单位报价",
                        doc: "适用按单位销售的产品,选择后按单位输入价格",
                    },
                ];
                if (this.datatype == 1) {
                    this.saveUrl = config.GDPRE_PRICE_SAVE; //产品价格操作
                    this.lsUrl = config.GDPRE_PRICE_LS; //产品价格列表
                } else {
                    this.saveUrl = config.PROPRE_PRICE_SAVE; //服务价格操作
                    this.lsUrl = config.PROPRE_PRICE_LS; //服务价格列表
                }
            } else {
                this.cities = [
                    {
                        fields_value: "0",
                        label: "无关联计算成本",
                        doc: "适用单一规格或单位成本的产品",
                    },
                    {
                        fields_value: "2",
                        label: "按规格计算成本",
                        doc: "适用按规格计算的产品,选择后按规格输入成本",
                    },
                    {
                        fields_value: "1",
                        label: "按单位计算成本",
                        doc: "适用按单位计算的产品,选择后按单位输入成本",
                    },
                ];
                if (this.datatype == 2) {
                    this.saveUrl = config.PROPRE_COST_SAVE; //服务成本的操作
                    this.lsUrl = config.PROPRE_COST_LS; //服务成本的列表
                }
            }
        },
        setmaom() {},
        setConfigureSwitch(key, val) {
            const data = {
                key: key,
                is_updata: true,
            };
            this.$emit("setConfigureSwitch", data, val);
        },
        setStateFun(item, data) {
            if (item.isod == 1) return;
            if (item.status == 2 && this.datatype == 1) {
                this.$msg({
                    title: "该价格档未开启",
                });
                return;
            }
            data.map((v) => {
                if (v.id == item.id) {
                    v.isod = "1";
                    item.status == "1";
                } else {
                    v.isod = "2";
                }
            });
            this.setpriceSave(item, data);
        },
        setModifychildprice(item, data) {
            if (item.isod == 1) {
                item.status = "1";
                return;
            }
            this.setpriceSave(item, data);
        },

        eidtpriceTitle(item, data) {
            this.$prompt("请输入价格名称", "编辑", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPattern: /^.+$/,
                inputErrorMessage: "请输入价格名称",
                inputValue: item.title,
            })
                .then(async ({ value }) => {
                    data.map((v) => {
                        if (v.id == item.id) {
                            v.title = value;
                        }
                    });
                    this.setpriceSave(item, data);
                })
                .catch(() => {});
        },

        async setpriceSave(item, data) {
            let url = this.saveUrl;
            let param = {};
            if (this.datatype == 1) {
                param = {
                    setval: data,
                };
            } else {
                param = {
                    title: item.title,
                    id: item.id,
                    status: item.status,
                    isod: item.isod,
                };
            }

            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.getListFun(res.status);
            }
        },
        async getListFun(type = null) {
            if (this.datatype == 1 && this.is_dom == 2) return;
            let url = this.lsUrl;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.data.price_ls || res.data.cost_ls) {
                this.list_data =
                    this.is_dom == 1 ? res.data.price_ls : res.data.cost_ls;
                if (type) {
                    this.$msg({
                        title: "保存成功",
                    });
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.commodityprice-box {
    .dialog-box {
        .quotation-method {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .method-title {
                margin-right: 10px;
                color: #000;
            }
        }
        .productlabel-scribe {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 5px;
            border: 1px #efdede solid;
            padding: 5px 10px;
            .scribe-left {
                font-size: 12px;
                .title {
                    font-size: 14px;

                    text-decoration: line-through;
                    &.cost {
                        text-decoration: none;
                    }
                }
                .explain {
                    color: #9d9d9d;
                    .scribe {
                        text-decoration: line-through;
                    }
                }
            }
        }
        .list-box {
            height: 500px;
            overflow: auto;
            margin-top: 10px;
            .list-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                border-bottom: 1px #f7f7f7 solid;
                padding: 5px 10px;
                cursor: pointer;
                &:hover {
                    background: #f7f7f7;
                }
                .list-left {
                    .title {
                        max-width: 200px;
                        display: block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                ::v-deep.list-right {
                    .el-button {
                        padding: 5px;
                        font-size: 12px;
                        vertical-align: bottom;
                        margin-right: 10px;
                    }
                    .default-price {
                        border: 1px #459ffd solid;
                        padding: 2px 5px;
                        font-size: 12px;
                        margin-right: 10px;
                        color: #459ffd;
                        .el-icon-check {
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
        .w-select {
            width: 290px;
        }
    }
}
</style>

<style lang="scss">
</style>